(function(){
  let CD = document.querySelector('#CD')
  let wrapper = CD.querySelector('.s_home')
  let ulw = Array.from(wrapper.querySelectorAll('ul'))
  let slides = wrapper.querySelectorAll('.slide')
  let [btnPrev, btnNext] = Array.from(document.querySelectorAll('.xbtn'))

  let count = slides.length,
  interval = 3000,
  step = 0,
  timer = null,
  W = ulw[0].offsetWidth

  wrapper.appendChild(slides[0].cloneNode(true))
  count++
  // wrapper.style.width = `${count * W}px`

  wrapper.style.transform = `translateX(${-step * W}px)`

  const moveRight = function moveRight() {
    step++
    if (step >= count) {
      // 当前已经是最后一项(克隆项)
      wrapper.style.transitionDuration = '0s'
      wrapper.style.transform = `translateX(0px)`
      step = 1
      //在浏览器中读一次wrapper，直接进行一次渲染
      //若不进行这一步则会与下面代码合一被浏览器只渲染一次
      //导致前面设置的被覆盖
      wrapper.offsetWidth
    }
    wrapper.style.transitionDuration = '1.5s'
    wrapper.style.transform = `translateX(${-step * W}px)`
  }

  //向左切换图片(wrapper向右运动)
  const moveLeft = function moveLeft() {
    step--
    if (step < 0) {
      // 当前已经是第一张
      wrapper.style.transitionDuration = '0s'
      wrapper.style.transform = `translateX(${-(count - 1) * W}px)`
      step = count - 2
      //在浏览器中读一次wrapper，直接进行一次渲染
      //若不进行这一步则会与下面代码合一被浏览器只渲染一次
      //导致前面设置的被覆盖
      wrapper.offsetWidth
    }
    wrapper.style.transitionDuration = '1.5s'
    wrapper.style.transform = `translateX(${-step * W}px)`
  }

  btnPrev.onclick = _.throttle(moveLeft)
  btnNext.onclick = _.throttle(moveRight)
})()